// pages/compass/compass.js// pages/compass/compass.js
Page({
  // 页面数据对象，存储动画实例
  data: {
    animation: {}
  },

  // 页面初次渲染完成时触发
  onReady: function () {
    // 创建动画实例，持续时间1000ms，缓动函数为ease
    this.animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
    })
  },

  // 实现从原点随机旋转某一个角度（-360°~360°）
  rotate: function () {
    // 生成随机旋转角度（Math.random()*720-360 生成范围：-360~360）
    this.animation.rotate(Math.random() * 720 - 360).step()
    // 导出动画队列并更新到data中
    this.setData({
      animation: this.animation.export()
    })
  },

  // 实现图片随机缩放的效果（0~2倍）
  scale: function () {
    // 生成随机缩放比例（Math.random()*2 生成范围：0~2）
    this.animation.scale(Math.random() * 2).step()
    this.setData({
      animation: this.animation.export()
    })
  },

  // 实现平移变换的效果（-50~50px范围随机偏移）
  translate: function () {
    // 生成x轴随机偏移量（-50~50）
    // 生成y轴随机偏移量（-50~50）
    this.animation.translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
    this.setData({
      animation: this.animation.export()
    })
  },

  // 实现对x、y轴坐标进行随机倾斜（0~90度）
  skew: function () {
    // 生成x轴随机倾斜角度（0~90）
    // 生成y轴随机倾斜角度（0~90）
    this.animation.skew(Math.random() * 90, Math.random() * 90).step()
    this.setData({
      animation: this.animation.export()
    })
  },

  // 实现同时进行旋转和缩放（组合动画）
  rotateAndScale: function () {
    // 链式调用动画方法（同时执行）
    this.animation.rotate(Math.random() * 720 - 360)
    this.animation.scale(Math.random() * 2).step()
    this.setData({
      animation: this.animation.export()
    })
  },

  // 实现旋转之后在缩放（顺序动画）
  rotateThenScale: function () {
    // 分步调用动画方法（先执行rotate，再执行scale）
    this.animation.rotate(Math.random() * 720 - 360).step()
    this.animation.scale(Math.random() * 2).step()
    this.setData({
      animation: this.animation.export()
    })
  },

  // 实现同时展示全部动画（组合动画）
  all: function () {
    // 链式调用所有动画方法（同时执行）
    this.animation.rotate(Math.random() * 720 - 360)
    this.animation.scale(Math.random() * 2)
    this.animation.translate(Math.random() * 100 - 50, Math.random() * 100 - 50)
    this.animation.skew(Math.random() * 90, Math.random() * 90).step()
    this.setData({
      animation: this.animation.export()
    })
  },

  // 实现按顺序展示全部动画（顺序动画）
  allOrder: function () {
    // 分步调用所有动画方法（按调用顺序执行）
    this.animation.rotate(Math.random() * 720 - 360).step()
    this.animation.scale(Math.random() * 2).step()
    this.animation.translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
    this.animation.skew(Math.random() * 90, Math.random() * 90).step()
    this.setData({
      animation: this.animation.export()
    })
  },

  // 实现回到初始状态
  reset: function () {
    // 将所有动画属性重置为初始值，持续时间设为0立即生效
    this.animation.rotate(0).scale(1).translate(0, 0).skew(0, 0).step({
      duration: 0
    })
    this.setData({
      animation: this.animation.export()
    })
  }
})